<template>
	<view class="pb15">
		<!-- 选择月份 -->
		<view class="bgWhite plr15 ptb15">
			<view class="bd97 plr12 justify-between align-center ptb8 radius8" @click="show = true">
				<view class="ft12 " :class="yearMonth?'gray3':'gray6'"><text> {{yearMonth||'选择月份'}}</text></view>
				<image src="../../../static/images/index/rli.png" mode="aspectFill" style="width: 24rpx;height: 24rpx;">
				</image>
			</view>
			<view class="ft12 gray6 pt15">
				<text>{{lang=='en'?'Settled income in ':''}}{{month}}{{$t('income').月已结算收益}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}})</text>
			</view>
			<view class="ft24 bold ptb12"><text>{{monthIncomeDetail.moon_sell |changeCurrency}}</text></view>
			<view class="ft12 pt5">
				<text>{{$t('income').已结算销售额}}：</text><text
					v-if="monthIncomeDetail.total_sell>=0">{{(monthIncomeDetail.total_sell).toLocaleString()}}</text>
			</view>
		</view>

		<!-- 升降 -->
		<view class="plr12 mt12">
			<view class="bgWhite plr15 flex-wrap ptb15 radius8">
				<view class="flex-col align-center  threem tc" v-for="(item,index) in detailGrid" :key="index"
					style="background-color: #FEFAFA;width: 200rpx;" :class="{'mb10':index<6}">
					<view class="ft12 gray6 " style="word-break:break-all;">
						<text>{{$t('income')[item.title]}}({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}})</text>
					</view>
					<view class="ft18 bold" style="padding: 24rpx 0 16rpx 0 ;">
						<text>{{item.money|changeCurrency}}</text>
					</view>
					<view v-if="item.percentage>0" class="ft12 light"><text>+{{item.percentage}}%</text>
						<image src="../../../static/images/index/hongsheng.png" mode="aspectFill"
							style="width: 12rpx;height: 24rpx;"></image>
					</view>
					<view v-if="item.percentage==0" class="ft12 " style="color:#ffc000;">
						<text>{{item.percentage}}%</text>
						<image src="../../../static/images/index/fshuangjiantou.png" mode="aspectFill"
							style="width: 24rpx;height: 12rpx;"></image>
					</view>
					<view v-if="item.percentage<0" class="ft12 " style="color: #70B603;">
						<text>{{item.percentage}}%</text>
						<image src="../../../static/images/index/lvjiang.png" mode="aspectFill"
							style="width: 12rpx;height: 24rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 已结算收益趋势 (近6个月) -->
		<view class="plr12">
			<view class="bgWhite plr15 ptb15 radius8 mt12">
				<view class="ft15 bold pb15 "><text>{{$t('income').已结算收益趋势近6个月}}</text></view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>
		<view>
			<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="year-month"
				@cancel="show = false" @confirm="confirmM" :closeOnClickOverlay="true" @close="show = false"
				:minDate="startYM" :maxDate="endYM" :cancelText="$t('common').取消"
				:confirmText="$t('common').确认"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {},
				opts: {
					color: ["#1890FF"],
					padding: [30, 0, 0, 10],
					dataLabel: false,
					// dataPointShape: false,
					dataPointShapeType: 'solid',
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						calibration: true,
						// rotateLabel: true,
						marginTop: 10,
						// rotateAngle: 45,
						fontSize: 10,
					},
					yAxis: {
						// disabled:true,
						gridType: "dash",
						dashLength: 10,
						showTitle: "true",
						data: [{
							title: "单位:元",
							titleOffsetY: -20,
							titleOffsetX: -12,
							axisLine: false,
							textAlign: "right",
							min: 0,
							// max: 60000
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						tooltip: {
							bgColor: "#333333",
							borderRadius: 4,
							legendShow: false
						}
					}
				},
				show: false,
				value1: Number(new Date()),
				yearMonth: "",
				month: "",
				monthIncomeDetail: {}, //月度收益详情
				detailGrid: [{
					title: '推新奖励',
					money: 0,
					percentage: 2,
					esc: false
				}, {
					title: '培训津贴',
					money: 0,
					percentage: 0,
					esc: false
				}, {
					title: '零售收益',
					money: 0,
					percentage: -1,
					esc: false
				}, {
					title: '市场补贴',
					money: 0,
					percentage: '',
					esc: false
				}, {
					title: '段位津贴',
					money: 0,
					percentage: '',
					esc: false
				}, {
					title: '进取津贴',
					money: 0,
					percentage: '',
					esc: false
				}, {
					title: '保护补贴',
					money: 0,
					percentage: '',
					esc: false
				} ],
				categories: [], //横坐标数据,
				seriesData: [], //纵坐标数据
				nowY: '', //当前年
				nowM: '', //当前月
				startYM: '', //近6个月的年月日期时间戳
				endYM: '', //当前日期时间戳
				lang: ''
			}
		},
		onLoad() {
			this.getnow()
			this.endYM = Number(new Date().getTime())
			let currency = uni.getStorageSync('currency')
			if (currency == 'USD') {
				this.$set(this.opts.yAxis.data[0], 'title', this.$t('common').单位美元)
			} else {
				this.$set(this.opts.yAxis.data[0], 'title', this.$t('common').单位元)
			}
			uni.setNavigationBarTitle({
				title: this.$t('income').月度收益
			})
			this.lang = uni.getStorageSync('lang').lang
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categories,
						series: [{
							name: this.$t('index').已结算收益,
							data: this.seriesData
						}, ],
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			confirmM(e) {
				console.log(e)
				let date = new Date(e.value)
				console.log(date)
				let year = date.getFullYear()
				let month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				this.yearMonth = year + '-' + month
				this.month = date.getMonth() + 1
				// 计算当前日期和选择日期之间的月份差
				// let diffMonths = (this.nowY - year) * 12 + this.nowM - month;
				// console.log(diffMonths)
				// if (diffMonths <= 6) {

				// } else {
				// 	return this.$utils.msg('选择的日期不在近6个月内')
				// }
				this.show = false
				this.getmoonincomedetailAPI()
				this.categories = []
				this.seriesData = []
				this.getServerData()
			},
			//获取当前的年月 和前6个月的年月
			getnow() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = (currentDate.getMonth() + 1) < 10 ? `0${(currentDate.getMonth() + 1)}` : (currentDate
					.getMonth() + 1); // 月份从0开始，所以要加1
				// this.nowY = year      //当前的年月
				// this.nowM = month      //当前的月
				this.yearMonth = year + '-' + month
				this.month = currentDate.getMonth() + 1
				// 获取进6月的年月
				let lyear = year
				// console.log(lyear)
				let lmonth = currentDate.getMonth() + 1
				console.log(lmonth)
				if (lmonth < 6) {
					lyear -= 1;
					lmonth = lmonth + 7;
				} else {
					lmonth -= 5;
				}
				let startYM = lyear + '-' + (lmonth < 10 ? `0${lmonth}` : lmonth + '-' + '01')
				let dateObj = new Date(startYM);
				console.log(startYM)
				// 获取时间戳（毫秒级）
				this.startYM = dateObj.getTime();
				this.getmoonincomedetailAPI()
			},
			// 月度收益详情
			async getmoonincomedetailAPI() {
				const res = await this.$api.getmoonincomedetail({
					date: this.yearMonth
				})
				this.monthIncomeDetail = res.data.data
				this.detailGrid[0].money = this.monthIncomeDetail.new_price
				this.detailGrid[1].money = this.monthIncomeDetail.train_price
				this.detailGrid[2].money = this.monthIncomeDetail.retail_price
				this.detailGrid[6].money = this.monthIncomeDetail.protect_price
				this.detailGrid[4].money = this.monthIncomeDetail.dan_price
				this.detailGrid[3].money = this.monthIncomeDetail.market_price
				this.detailGrid[5].money = this.monthIncomeDetail.enter_price
				this.detailGrid[0].percentage = this.monthIncomeDetail.new_beilv
				this.detailGrid[1].percentage = this.monthIncomeDetail.train_beilv
				this.detailGrid[2].percentage = this.monthIncomeDetail.retail_beilv
				this.detailGrid[6].percentage = this.monthIncomeDetail.protect_beilv
				this.detailGrid[4].percentage = this.monthIncomeDetail.dan_beilv
				this.detailGrid[3].percentage = this.monthIncomeDetail.market_beilv
				this.detailGrid[5].percentage = this.monthIncomeDetail.enter_beilv
				res.data.list.forEach((item, index) => {
					let newitem = item.date.slice(5).replace("-", "/")
					let date = (newitem.startsWith('0') ? newitem.slice(1) : newitem) + '月'
					this.categories.push(date)
					if (uni.getStorageSync('currency') == 'USD') {
						this.seriesData.push((item.total_amt_award * uni.getStorageSync('rate')).toFixed(2))
					} else {
						this.seriesData.push(item.total_amt_award)
					}
				})
			}
		},
	}
</script>

<style>
	.threem {
		margin-right: 19rpx;
		padding: 30rpx 0rpx;
		border-radius: 8rpx;
	}

	.threem:nth-child(3n) {
		margin-right: 0rpx !important;
	}
</style>